<template>
	<view class="main">
		<u-navbar
		          title="河南预约挂号平台"
		          :autoBack="true"
		      >
		      </u-navbar>
		<view class="nav">
			<view class="nav_normal nav_left" :class="{nav_active : leftActive}" @click="btnActive(1)">按疾病</view>
			<view class="nav_normal nav_right" :class="{nav_active : rightActive}" @click="btnActive(2)">按科室</view>
		</view>
		<view class="go_details">
			<u-search :placeholder="inputText" :clearabled="true" :animation="false" :showAction="false"
				v-model="PopUpSarCh" :disabled="true" bgColor="#fff" @click="goMyDetails()"></u-search>
		</view>
		<view class="brand_hot">
			<view class="brand_title">
				{{showTips}}
			</view>
			<view class="brand_content">
				<!-- <view class="brand_icon" :class="{active_disease: v.name == activeDisease}" v-for="(v,k) in myBrand"
					:key="k" @click="selectDisease(v)"> -->
				<view class="brand_icon"  v-for="(v,k) in myBrand" :key="k" @click="selectDisease(v)">
					{{v.name}}
				</view>
			</view>
		</view>
		<view class="content">
			<scroll-view scroll-y="true">
				<view class="city">
					<view class="city_item" v-for="v in allCity" :class="{'city_active' : currentCity.name == v.name }"
						@click="selectCity(v)">
						{{v.name}}
					</view>
				</view>
			</scroll-view>
			<scroll-view scroll-y="true" style="background-color: #F5F6F8">
				<view class="zone">
					<view class="currentCity" v-if="currentCity">{{currentCity.name}}</view>
					<view class="zone_item">
						<view class="zone_item_box" v-for="v in zone"
							:class="{'zone_active' : v.name == currentZone.name }" @click="selectZone(v)">
							{{v.name}}
							<!-- <u-button :plain="true" color="#4581F6" size="small" shape="circle">{{v}}</u-button> -->
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex'
	import {
		searchCity,
		byDiseaseHot,
		byDeptHot,
		positionList,
		diseaseByPostiont,
		byDeptClassifyTree,
		postKeyWord,
		searchNav
	} from '@/api/home/search.js'
	export default {
		data() {
			return {
				leftActive: true,
				rightActive: false,
				showTips: '热门疾病',
				inputText: '',
				PopUpSarCh: '',
				myBrand: [],
				activeDisease: '',
				allCity: [],
				zone: [],
				currentCity: {},
				currentZone: {},
				searchTopData: [],
				title:""
			}
		},
		methods: {
			...mapMutations(['NAVGETDATA']),
			selectCity(city) {
				//console.log(city);
				this.currentCity = city
				// let store = this.$store.state.doc.navCity
				// store.id = city.id
				// store.name = city.name
			},
			async selectZone(zone) {
				//this.currentZone = zone
				await this.addHis({
					'name': zone.name,
					'type': zone.type
				}) //添加搜索历史
			},
			async Bydep() {
				uni.showLoading({ //热门科室
					title: '加载中',
					mask: true
				});
				let res = await byDeptHot()
				uni.hideLoading()
				this.myBrand = res.data
			},
			async ByDis() { //热门疾病
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				let res = await byDiseaseHot()
				uni.hideLoading()
				this.myBrand = res.data
			},
			async btnActive(type) {
				//1疾病 2科室
				this.activeDisease = ''
				if (type == 1) {
					this.leftActive = true
					this.rightActive = false
					this.showTips = '热门疾病' //展示文字
					this.inputText = '请输入您要搜索的疾病'
					await this.ByDis()
					await this.disRes()

				}
				if (type == 2) {
					this.leftActive = false
					this.rightActive = true
					this.showTips = '热门科室' //展示文字
					this.inputText = '请输入您要搜索的科室'
					await this.Bydep()
					await this.depRes()

				}
			},
			async depRes() { //全量科室（包括左侧列表）
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				let res = await byDeptClassifyTree()
				this.allCity = res.data
				this.currentCity.name = this.allCity[0].name
				//console.log(this.allCity);
				this.zone = this.allCity[0].list
				//this.currentZone = this.zone[0]
				uni.hideLoading()
			},
			async disRes() { //疾病列表左侧
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				let res = await positionList()
				this.allCity = res.data
				//console.log(this.allCity);
				this.currentCity.name = this.allCity[0].name
				this.disList(this.allCity[0].id)
				uni.hideLoading()
			},
			async disList(id) { //疾病列表右侧
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				let res = await diseaseByPostiont(Number(id))
				this.zone = res.data
				//this.currentZone = this.zone[0]
				uni.hideLoading()
			},
			goMyDetails() {
				uni.navigateTo({
					url: '/pages/sousuo/index'
				})
			},
			async addHis(data) { //添加搜索记录
				let params = {
					keyWord: data.name,
					type: data.type
				}
				this.$store.state.doc.keyWord.value = data.name
				this.$store.state.doc.keyWord.type = data.type
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				let res = await postKeyWord(params)
				this.searchTopData = res.data
				this.$store.state.doc.searchTopData = res.data
				uni.hideLoading()
				this.NAVGETDATA()
			},
			async selectDisease(params) {
				this.activeDisease = params.name
				await this.addHis({
					'name': params.name,
					'type': params.type
				}) //添加搜索历史
			}
		},
		watch: {
			async currentCity(current, old) {
				//console.log(current);
				//按科室
				if (this.rightActive) {
					this.zone = current.list
					//this.currentZone = this.zone[0]
					return
				}
				await this.disList(current.id)
			}
		},
		onShow() {
			// my.setNavigationBar({
			// 	title: '河南省预约挂号',
			// })
		},
		async onLoad(params) {
			if (params.type == 'keshi') {
				this.title="按科室"
				this.btnActive(2)
				await this.Bydep()
				await this.depRes()
				return
			}else{
				this.title="按疾病"
			}
			this.btnActive(1)
			await this.ByDis()
			await this.disRes()
			//await this.disList()
		},
	}
</script>

<style lang="scss" scoped>
	.main {

		//background-color: #F5F6F8 ;
		padding-top: 180rpx;
		.nav {
			display: flex;
			align-items: center;
			padding: 30rpx 32rpx;
			background-color: #F5F6F8;

			.nav_normal {
				flex-shrink: 0;
				text-align: center;
				width: 50%;
				height: 80rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #333333;
				line-height: 80rpx;
				background-color: #fff;
			}

			.nav_left {
				border-radius: 40rpx 0 0 40rpx;
			}

			.nav_right {
				border-radius: 0 40rpx 40rpx 0;
			}

			.nav_active {
				color: #FFFFFF;
				background: #4581F6;
			}
		}

		.go_details {
			background-color: #F5F6F8;
			padding: 0 30rpx 30rpx 30rpx;
		}

		.brand_hot {
			background-color: #F5F6F8;
			padding: 20rpx 0 30rpx 0;

			.brand_title {
				font-size: 28rpx;
				font-weight: 600;
				color: #3D3D3D;
				line-height: 40rpx;
				padding-left: 30rpx;
			}

			.brand_content {
				display: flex;
				flex-wrap: wrap;

				.brand_icon {
					flex-shrink: 0;
					background-color: #FFFFFF;
					text-align: center;
					font-size: 28rpx;
					font-weight: 400;
					color: #3D3D3D;
					margin: 16rpx 0 16rpx 20rpx;
					padding: 10rpx 40rpx;
					border-radius: 20rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #3D3D3D;
					//line-height: 20px;
				}

				.active_disease {
					background: #4581F6;
					color: #FFFFFF;
				}
			}
		}

		.content {
			display: flex;
			padding-bottom: 50rpx;
			//width: 90%;
			// height: 1000rpx;
			.city {
				display: flex;
				flex-direction: column;
				flex-wrap: nowrap;
				height: 700rpx;
				width: 246rpx;
				background: #FFFFFF;
				margin-bottom: 100rpx;

				.city_item {
					font-size: 28rpx;
					font-weight: 400;
					line-height: 72rpx;
					width: 166rpx;
					padding: 30rpx 0 0 72rpx;
				}

				.city_active {
					color: #4581F6;
				}
			}

			.zone {
				width: 464rpx;
				height: 700rpx;
				background: #F5F6F8;
				padding: 30rpx 0 0 40rpx;


				.currentCity {
					font-size: 28rpx;
					font-weight: 400;
					color: #3D3D3D;
					line-height: 40rpx;
				}

				.zone_item {
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;

					.zone_item_box {
						font-size: 28rpx;
						font-weight: 400;
						color: #3D3D3D;
						background: #FFFFFF;
						text-align: center;
						border-radius: 46rpx;
						line-height: 40rpx;
						padding: 10rpx 12rpx;
						margin-right: 50rpx;
						margin-top: 20rpx;
						flex: 0 0 85%;
					}

					.zone_active {
						background: #4581F6;
						color: #FFFFFF;
					}
				}
			}
		}
	}
</style>